@wrapper-width: 60em;
@font-size: 14px;
@font-stack: helvetica, arial, verdana, sans-serif;

body {
    font-family: @font-stack;
    font-size: @font-size;
    color: #333;
}

h1,h2,h3,h4,h5 {
    color: #222;
    font-weight: bold;
    letter-spacing: -0.06em;
}

h2 {
    font-size: 1.5em;
    margin: .5em 0px;
}

#wrapper {
    width: @wrapper-width;
    margin: 2em auto;
}

.clearfix { clear: both; }

a {
    outline: none;
    color: inherit;
    text-decoration: none;
}

#nav {
    float: left;
    width: 14%;
    
    ul li a {
        color: #555;
        display: block;
        padding: .75em;
    }
    
    ul li a:hover {
        color: #900;
        background: #eee;
    }
}

#main {
    float: right;
    min-width: 80%;
/*    border-left: solid 1px #ccc;*/
    padding-left: 2em;
    
    table {
        margin: 0px;
        border-collapse: collapse;
        font-size: 1em;
        width: 100%;

        th, td {
            text-align: left;
            padding: .5em;
        }

        th {
            letter-spacing: -0.06em;
            text-transform: uppercase;
            color: #666;
            font-size: .8em;
            padding: .5 * @font-size;
            border-bottom: solid 1px #aaa;  
        }
    }
    
    h2:first-child {
        margin-top: 0px;
    }
    
    form {
        margin: 0px;
        padding: 0px;
        margin-bottom: 3em;
    }
    
    tr:nth-child(2n-1) td {
        background-color: #eee;
    }
}

#footer {
    text-align: center;
    margin-top: 3em;
    font-size: .8em;
    color: #999;
}

#top {
    margin-bottom: 1em;
    border-bottom: solid 2px #222;
    padding-bottom: 1em;
    
    h1 {
        vertical-align: top;
        float: left;
        font-size: 2.5em;
    }
    
    img {
        vertical-align: top;
        max-height: 2.5em;
        float: right;
    }
}